<!DOCTYPE html>
<html lang="en" manifest="cache.appcache">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style lang="">
        img {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <img src="./img/1.png" alt="">
    <img src="./img/2.png" alt="">

    <script>
        // 离线资源存储完成之后触发
        window.applicationCache.addEventListener('cached', function () {
            console.log('cached');
        });

        // 离线存储资源进行更新检查的时候会触发
        window.applicationCache.addEventListener('checking', function () {
            console.log('checking');
        });

        // 开始下载离线资源的时候会触发
        window.applicationCache.addEventListener('downloading', function () {
            console.log('downloading');
        });

        // 下载每一个资源的时候会触发
        window.applicationCache.addEventListener('progress', function () {
            console.log('progress');
        });

        // 离线资源更新完成之后
        window.applicationCache.addEventListener('updateready', function () {
            console.log('updateready');
            if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
                window.applicationCache.swapCache();
                window.location.reload();
            }
        });

        // 检查更新之后发现没有资源更新的时候触发
        window.applicationCache.addEventListener('noupdate', function () {
            console.log('noupdate');
        });

        // obsolete
        window.applicationCache.addEventListener('obsolete', function () {
            console.log('obsolete');
        });

        // error
        window.applicationCache.addEventListener('error', function () {
            console.log('error');
        });
    </script>
</body>

</html>